<style lang="less">
    .form .el-col {
        margin-bottom: 0;
    }
</style>
<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <div class="m-2">
            <table class="ui-table center table-component horizontal" cellspacing="0" cellpadding="0">
              <thead />
              <tbody :model="details">
                <tr>
                  <th>{{ $t('rosterList.listTable.specialListName') }}</th>
                  <td>
                    <span :title="details.specialListName">{{ details.specialListName }}</span>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t('rosterList.listTable.rosterCount') }}</th>
                  <td>
                    <span :title="details.rosterCount">{{ details.rosterCount }}</span>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t('rosterList.listTable.statusCd') }}</th>
                  <td>
                    <span
                      v-for="item in rosterStatusCd"
                      v-if="details.statusCd == item.item_code"
                      :title="item.item_text"
                    >{{ item.item_text }}</span>
                  </td>
                </tr>
                <!--<tr>-->
                <!--<th>{{$t('rosterList.listTable.labelDataCol')}}</th>-->
                <!--<td>-->
                <!--<span :title="details.labelDataCol">{{details.labelDataCol}}</span>-->
                <!--</td>-->
                <!--</tr>-->
                <tr>
                  <th>{{ $t('rosterList.listTable.specialListDesc') }}</th>
                  <td>
                    <span :title="details.specialListDesc">{{ details.specialListDesc }}</span>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t('rosterList.listTable.staffName') }}</th>
                  <td>
                    <span :title="details.staffName">{{ details.staffName }}</span>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t('rosterList.listTable.createDate') }}</th>
                  <td>
                    <span :title="details.createDate">{{ details.createDate }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="130px"
            size="mini"
            inline
            label-position="right"
          >
            <el-col v-if="modelType=='rosterAdd'" :span="24">
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.createStaffName') + ':'" prop="auditStaff">
                  <!-- <el-input v-model="form.auditStaff" :placeholder="$t('labelSpec.placeholder.auditStaffHint')"></el-input> -->
                  <el-select v-model="form.auditStaff" style="width: 180px;" filterable :placeholder="$t('labelSpec.placeholder.auditStaffHint')">
                    <el-option
                      v-for="item in userAll"
                      :key="item.staffId"
                      :label="item.staffName"
                      :value="item.staffId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.applyRemark') + ':'" prop="applyRemark">
                  <el-input
                    v-model="form.applyRemark"
                    maxlength="500"
                    type="textarea"
                    :placeholder="$t('labelSpec.placeholder.applyRemarkHint')"
                  />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="modelType=='audit'" :span="24">
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.auditResult') + ':'" prop="statusCd">
                  <el-radio
                    v-for="item in labelStatusCd"
                    v-if="item.item_code == '1400' || item.item_code == '1500'"
                    v-model="form.statusCd"
                    :label="item.item_code"
                  >{{ item.item_text }}</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.auditRemark') + ':'" prop="auditRemark">
                  <el-input
                    v-model="form.auditRemark"
                    maxlength="500"
                    type="textarea"
                    :placeholder="$t('labelSpec.placeholder.auditRemarkHint')"
                  />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="modelType!='detail'" :span="24" style="padding-left: 100px;">
              <el-button type="primary" @click="onSubmit" v-text="$t('submit')" />
              <el-button @click="onClose" v-text="$t('close')" />
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
export default {
  name: 'RosterDetail',
  props: {
    modelType: {
      type: String,
      default: ''
    },
    specialListId: {
      type: Number,
      default: 0
    },
    rosterStatusCd: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      details: {},
      reverse: false,
      activities: [],
      userAll: [],
      rules: {
        specialListName: [
          { required: true, message: this.$t('rosterList.rules.specialListName'), trigger: 'blur' },
          { min: 1, max: 4, message: this.$t('rosterList.rules.specialListNameLength'), trigger: 'blur' }
        ],
        specialListDesc: [
          { required: true, message: this.$t('rosterList.rules.specialListDesc'), trigger: 'blur' },
          { min: 1, max: 2000, message: this.$t('rosterList.rules.specialListDescLength'), trigger: 'blur' }
        ]
      },
      audit: {
        statusCd: [
          { required: true, message: this.$t('labelSpec.rules.statusCd'), trigger: 'blur' }
        ],
        auditRemark: [
          { required: true, message: this.$t('labelSpec.rules.auditRemark'), trigger: 'blur' },
          { min: 1, max: 500, message: this.$t('labelSpec.rules.auditRemarkLength'), trigger: 'blur' }
        ]
      },
      defaultValue: {
        specialListName: '',
        specialListDesc: '',
        statusCd: '1200'
      },
      form: {
        specialListName: '',
        specialListDesc: ''
      },
      details: {
      },
      labelAuditLogBean: {},
      count: 1
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.form = this.defaultValue
      this.getLabelDetails()
      if (this.modelType == 'rosterAdd') {
        this.getUserAll()
      }
    },
    actDateFormat(data) {
      return dateFormat(new Date(data))
    },
    getLabelDetails() {
      const that = this
      console.log(that.count)
      that.count++
      this.R.forTaglib.get('/mktSpecialList/detail/' + this.specialListId).then(res => {
        if (res.ok) {
          that.details = res
          that.details.statusDate = this.actDateFormat(res.statusDate)
          that.details.createDate = this.actDateFormat(res.createDate)
        }
      })
    },
    getUserAll() {
      const that = this
      this.R.forTaglib.get('/mktlabel/queryUserList').then(res => {
        if (res.ok) {
          that.userAll = res.userList
        }
      })
    },
    onSubmit() {
      if (this.modelType == 'audit') {
        this.labelAuditLogBean.auditResult = this.form.statusCd
        this.labelAuditLogBean.auditRemark = this.form.auditRemark
        this.form.labelAuditLogBean = this.labelAuditLogBean
      } else {
        this.labelAuditLogBean = {}
        this.form.statusCd = 1300
        this.labelAuditLogBean.applyRemark = this.form.applyRemark
        this.labelAuditLogBean.auditStaff = this.form.auditStaff
        this.form.labelAuditLogBean = this.labelAuditLogBean
      }

      this.$refs.form.validate(valid => {
        if (valid) {
          this.R.forTaglib.postJson('/mktlabel/editLabelStatus', this.form).then(res => {
            if (res.ok) {
              this.$message.success(this.$t('saveSuccess'))
            }
          }).catch(err => {
            this.$message.error(err.toString())
          })
        }
      })
    },
    onClose() {
      this.$emit('onDetailSuccess', true)
    }
  }
}
</script>

